<template>
  <div>
    <div v-if="loading" class="loading">{{loadingTip}}</div>
    <div v-if="conference" class="container" :style="{height:`${windowHeight}px`}">
      <div class="container-left">
        <meeting-carousel :conference="conference"></meeting-carousel>
        <div class="screen-large" :style="{height:`${windowHeight-212}px`}">
          <meeting-video
            v-if="selectedParticipant"
            :track="selectedParticipant.videoTrack"
            controls
          ></meeting-video>
        </div>
        <meeting-controls :conference="conference"></meeting-controls>
      </div>

      <div class="container-right">
        <meeting-chat :conference="conference"></meeting-chat>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">

import ConnectionProxyBuilder from "./core/ConnectionProxyBuilder";
//components
import MeetingVideo from "./components/MeetingVideo";
import MeetingCarousel from "./components/MeetingCarousel";
import MeetingChat from "./components/MeetingChat";
import MeetingControls from "./components/MeetingControls";
import { ConnectionFailedError } from "./core/error";

export default {
  // inheritAttrs: false,
  components: {
    MeetingVideo,
    MeetingChat,
    MeetingCarousel,
    MeetingControls
  },
  errorCaptured: (err, vm, info) => {
    console.log(err);
    $.growl.error({ message: err.message });
    return false;
  },

  data() {
    return {
      //房间ID
      id: this.$route.params.id,

      //loading
      loading: false,
      loadingTip: "",

      //connection唯一对象
      connection: null,
      //conference唯一对象
      conference: null,

      windowHeight: window.innerHeight
    };
  },
  methods: {
    init() {
      this.loadingTip = "初始化...";

      //初始化JitsiMeetJS
      JitsiMeetJS.init();

      //设置日志等级
      JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.ERROR);
    },
    async connect() {
      this.loadingTip = "连接服务器...";

      //获取connection
      // this.connection = ConnectionProxyBuilder.build("/http-bind");
      this.connection = ConnectionProxyBuilder.build("https://jitsi.akinotest.top/http-bind");

      
      //尝试连接服务器
      await this.connection.connect();
    },
    async join() {
      this.loadingTip = "加入会议...";

      // 创建conference
      this.conference = this.connection.initJitsiConferenceProxy(this.id, {
        openBridgeChannel: true
      });

      //尝试加入会议
      try {
        await this.conference.join();
      } catch (error) {
        throw new ConnectionFailedError("加入会议失败");
      }
    }
  },
  computed: {
    selectedParticipant() {
      return this.conference.getSelectedParticipant();
    }
  },
  async mounted() {
    window.onresize = () => {
      this.windowHeight = window.innerHeight;
    };

    this.loading = true;
    try {
      this.init();
      await this.connect();
      await this.join();
    } catch (error) {
      this.loadingTip = error.message;
      throw error;
    }

    const name = prompt("取个名字吧");

    //设置展示名字
    this.conference.setDisplayName(name || "无名氏");

    this.loading = false;
  }
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
}
.container-left {
  width: 80%;
}
.container-right {
  width: 20%;
}
.screen-large {
  width: 100%;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  background: yellowgreen;
  opacity: 0.3;
  position: absolute;
  height: 100%;
  width: 100%;
}
</style>
